<template>
  <div class="cus-menu-container">
    <!-- :unique-opened="true"  @open="openMenu"-->
    <!-- -->
    <el-menu
      :default-active="active"
      @select="selectedMenu"
      :default-openeds="openeds"
    >
      <cus-menu
        v-for="item in list"
        :key="item.id"
        :item="item"
        :class="item.id === active ? 'menu-active' : ''"
      />
    </el-menu>
  </div>
</template>

<script>
import cusMenu from './cus-menu'
import { getUniqueFromTree } from '@/utils'
export default {
  name: 'cusAside',
  provide() {
    return {
      injectReport: this.injectReport, // 可设置为父组件props的方法
      injectClick: this.injectClick, // 可设置为父组件props的方法
    }
  },
  props: {
    list: {
      type: Array,
      default() {
        return []
      },
    },
    active: {
      type: String,
      default: '',
    },
  },
  components: {
    'cus-menu': cusMenu,
  },
  data() {
    return {
      openeds: ['dataSearch'],
    }
  },
  methods: {
    // 所展开的menu
    // openMenu(id) {
    //   const currentMenu = getUniqueFromTree(this.list, 'id', id);
    //   this.$emit('open-menu', currentMenu);
    // },
    // 所选menu
    selectedMenu(id) {
      const currentMenu = getUniqueFromTree(this.list, 'id', id)
      this.$emit('change-menu', id)
      this.$emit('select-menu', currentMenu)
    },

    // 子孙组件inject方法
    injectReport(item) {
      this.$emit('report', item)
    },

    injectClick(item) {
      console.log(item)
    },
  },
}
</script>

<style lang="scss" scoped>
.cus-menu-container {
  height: calc(100%);
  overflow-y: auto;
  overflow-x: hidden;
}

.menu-active {
  background: #ecf6fb;
}
</style>
